<!--
 * @Author: liujinjun681 liujinjun681@qq.com
 * @Date: 2022-07-19 14:20:31
 * @LastEditors: liujinjun681 liujinjun681@qq.com
 * @LastEditTime: 2022-11-11 15:56:44
 * @FilePath: \hd_ims_web\src\views\board\boardSelect\board_mould_status copy.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="24">
        <el-form :inline="true">
          <el-form-item label="时间范围：">
            <!-- <el-date-picker v-model="date_range" type="datetimerange" placeholder="查询日期" style="width: 320px" @change="get_info"></el-date-picker> -->
            <el-date-picker
              v-model="daterange"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions"
              @change="get_info"></el-date-picker>
          </el-form-item>
          <el-form-item label="机台筛选：">
            <el-cascader
              v-model="selectJt"
              :options="optionsJt"
              :props="{ multiple: true, emitPath: false }"
              clearable
              style="width: 600px"></el-cascader>
          </el-form-item>
          <el-button type="warning" plain icon="el-icon-download" size="mini" :loading="exportLoading" @click="handleExport">导出</el-button>
          <!-- <el-radio-group v-model="type" size="small">
            <el-radio-button label="日"></el-radio-button>
            <el-radio-button label="周"></el-radio-button>
            <el-radio-button label="月"></el-radio-button>
          </el-radio-group> -->
        </el-form>
      </el-col>
    </el-row>
    <el-row :gutter="10" v-loading="loading">
      <el-col :span="24"><v-chart :options="option4" class="" :autoresize="true" style="width: 100%; height: 700px"></v-chart></el-col>
    </el-row>
  </div>
</template>

<script>
import BoardService from '@/api/board/board'

import 'echarts/lib/component/dataZoom'
import 'echarts/lib/component/toolbox'
import 'echarts/lib/component/markLine'
import 'echarts/lib/component/visualMap'

import { param } from '@/utils'
import { exportKcmData } from '@/api/repertory/kcmData'
function groupBy(array, f) {
  const groups = {}
  array.forEach(function (o) {
    const group = JSON.stringify(f(o))
    groups[group] = groups[group] || []
    groups[group].push(o)
  })
  return Object.keys(groups).map(function (group) {
    const g = JSON.parse(group)
    return {
      label: g,
      value: g,
      children: groups[group],
    }
  })
}
export default {
  data() {
    return {
      now_data: {},
      // 导出遮罩层
      exportLoading: false,
      loading: false,
      total: 21,
      queryParams: {
        beginTime: this.$moment().format(),
        endTime: this.$moment().format(),
      },
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick: (picker) => {
              const end = this.$moment().endOf('week').toDate()
              const start = this.$moment().startOf('week').toDate()
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '最近一个月',
            onClick: (picker) => {
              const end = this.$moment().endOf('day').toDate()
              const start = this.$moment().startOf('month').toDate()
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '上周',
            onClick: (picker) => {
              const date = this.$moment().add(-1, 'week')
              const end = date.endOf('week').toDate()
              const start = date.startOf('week').toDate()
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '上月',
            onClick: (picker) => {
              const date = this.$moment().add(-1, 'month')
              const end = date.endOf('month').toDate()
              const start = date.startOf('month').toDate()
              picker.$emit('pick', [start, end])
            },
          },
        ],
      },
      selectJt: [],
      optionsJt: [],
      type: '日',
      sys_m_data: [],
      curIndex: 0,
      daterange: [this.$moment().startOf('month'), this.$moment()],
      dataOee: { total: {}, detail: [] },
      moj_code: '',
      //用于补打标签 的 popup modal3
      openDiag: true,
    }
  },
  methods: {
    get_info() {
      this.loading = true
      this.queryParams.beginTime = this.$moment(this.daterange[0]).startOf('day').format()
      this.queryParams.endTime = this.$moment(this.daterange[1]).endOf('day').format()
      BoardService.getOeeView(this.queryParams)
        .then((response) => {
          this.dataOee = response
          this.optionsJt = []
          this.dataOee.total = this.dataOee.total || { oeeValue: 0.8 }
          this.dataOee.detail = this.dataOee.detail.map((o) => {
            o.label = o.oeeJtbh
            o.value = o.oeeJtbh
            o.group = o.label[0] + '区'
            o.oeeValue = (o.oeeValue * 100).toFixed(1)
            return o
          })
          this.optionsJt = groupBy(this.dataOee.detail, (i) => i.oeeJtbh[0] + '区')
          console.log(this.optionsJt)
          this.loading = false
        })
        .catch((e) => {
          this.loading = true
        })
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams
      this.$confirm('是否确认导出所有机台数据数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.exportLoading = true
          return BoardService.exportData(queryParams)
        })
        .then((response) => {
          this.download(response.msg)
          this.exportLoading = false
        })
        .catch(() => {})
    },
  },
  mounted() {
    this.get_info()
  },
  computed: {
    option4() {
      let dataZoom = [
        {
          xAxisIndex: [0],
          type: 'inside',
        },
      ]
      return {
        dataset: {
          source: this.selectJt.length !== 0 ? this.dataOee.detail.filter((o) => this.selectJt.includes(o.oeeJtbh)) : this.dataOee.detail,
        },
        grid: [{ left: '5%', top: '7%' }],
        xAxis: [
          {
            gridIndex: 0,
            type: 'category',
          },
        ],
        yAxis: [
          {
            gridIndex: 0,
            type: 'value',
            max: 100,
            axisLabel: {
              formatter: '{value}%',
            },
          },
        ],
        dataZoom: dataZoom,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
          formatter: (params) => {
            let param = params[0]
            return `${param.data.oeeJtbh} <br >生产效率：${param.data?.oeeValue}% `
          },
        },
        visualMap: {
          type: 'piecewise',
          splitNumber: 2,
          pieces: [
            { min: 0, max: this.dataOee.total?.oeeValue * 100, color: 'red' },
            { min: this.dataOee.total?.oeeValue * 100, max: 100, color: 'green' },
          ],
        },
        series: [
          {
            dimensions: ['oeeJtbh', 'oeeValue'],
            type: 'bar',
            xAxisIndex: 0,
            yAxisIndex: 0,
            barWidth: '50%',
            markLine: {
              precision: 1,
              label: {
                formatter: '平均值:{c}%',
              },
              lineStyle: {
                type: 'dashed',
                width: 2,
              },
              data: [{ name: '平均值', type: 'average' }],
            },
            label: {
              show: true,
              position: 'top',
              formatter: (a) => {
                return `${a.data?.oeeValue}%`
              },
            },
          },
        ],
      }
    },
  },
}
</script>
<style lang="scss" scoped></style>
